<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=8, IE=9, IE=10">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>GeocodeMatch Widget</title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css"/>
	<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dgrid/css/dgrid.css">
	<link rel="stylesheet" href="http://jsdev.arcgis.com/3.7/js/esri/css/esri.css"/>
	<link rel="stylesheet" href="../css/master.css"/>
	<style>
		html, body{
			width:100%;
			height:100%;
			margin:0;
			padding:0;
		}
	</style>
    <script>
        var dojoConfig = {
			isDebug: true,
            locale:"en",
            packages:[{
				name: "esri", 
				location: "../../esri" 
			},{
			  name: "dgrid", 
			  location: "../../dgrid" 
			},{
			  name: "xstyle", 
			  location: "../../xstyle" 
			},{
			  name: "put-selector", 
			  location: "../../put-selector" 
			}]
		};
    </script>
    <script src="../../../../dojo/dojo/dojo.js"></script>
    <script>
		var addressString = "19 Hastings Court, North Dartmouth Massachusetts"; 
		var map;
		var gm;
		
        require([			
            "esri/map",
			"esri/dijit/GeocodeMatch",
			"dijit/form/Button",
			"dojo/dom",
            "dojo/domReady!"
		], function (Map, GeocodeMatch, Button, dom, ready) {
			
			// Create the Map
			map = new Map("map", {
				autoResize:true,
				basemap: "topo",
				center: [-77.036, 38.891],
				zoom: 14,
			});
			
			// Initialize the Widget
			gm = new GeocodeMatch({
				map: map,
			}, 'gridContainer');
			
			// Start the widget
			gm.startup();
			
			// OnLoad
			gm.on("load", function(evt){
				gm.geocodeAddress(addressString).then(function(geocodeResults){ 
					console.log("geocodeResults", geocodeResults);						
				});
			});
        });
    </script>
</head>
<body class="claro esri">
<div id="map" style="height:50%;"></div>
<div id="gridContainer" style="height:50%;"></div>
</body>
</html>